<!--
author: 何其沆(pooky)
desc: Client Contract
date: 2021-12-02
-->
<template>
  <div class="contract">
    <a-spin :spinning="loading" tip="Loading...">
      <router-view v-if="route.matched.length === 3" @update="handleUpdate"></router-view>
      <e-container v-else class="container">
        <div class="top">
          <e-title-add title="Contract">
            <a-space>
              <span v-permission="'Contract:Add'" class="add-t" @click="addContract">
                <e-icon type="add" color="#3c6cfe" font-size="16px" />
                <span class="text">Add</span>
              </span>
              <a-divider type="vertical" class="divider"></a-divider>
              <span v-permission="'Contract:Add'" class="add-t" @click="showGenerateContractNumber = true">
                <e-icon type="LogRecord" color="#3c6cfe" font-size="16px" />
                <span class="text">Create New Code</span>
              </span>
              <a-divider type="vertical" class="divider"></a-divider>
              <span
                v-if="briefInfo.isExisting && !extensionStatus"
                v-permission="'Contract:Add'"
                class="add-t"
                @click="showApplyForExtension = true"
              >
                <e-icon type="ProjectHistory" color="#3c6cfe" font-size="16px" />
                <span class="text">Apply For Extension</span>
              </span>
              <span v-else-if="extensionStatus" class="extension-t">
                <e-icon type="correct" color="#52c41a" font-size="16px" />
                <span class="text">Extension</span>
              </span>
            </a-space>
          </e-title-add>
        </div>
        <div v-permission="'Contract:Query'">
          <div v-for="item in data.contractInfoList" :key="item.id" class="contract-container">
            <div class="line"></div>
            <div class="container-top">
              <div class="info">
                <e-icon type="contract_detail" font-size="16px" color="rgba(107, 121, 142, 0.85)"></e-icon>
                <span>{{ item.contractName }}</span>
              </div>
              <a-divider type="vertical" class="divider"></a-divider>
              <span style="padding-top: 2px">
                <e-icon
                  v-permission="'Contract:Edit'"
                  type="edit"
                  color="#a9b5c9"
                  font-size="16px"
                  style="cursor: pointer"
                  @click="handleEdit(item)"
                />
                <a-popconfirm
                  v-if="item.isCanDelete"
                  title="Are you sure delete this task?"
                  ok-text="Yes"
                  cancel-text="No"
                  @confirm="handleDelete(item)"
                >
                  <e-icon
                    v-permission="'Contract:Delete'"
                    type="delete"
                    color="#a9b5c9"
                    font-size="18px"
                    style="margin-left: 20px; cursor: pointer"
                  />
                </a-popconfirm>
              </span>
            </div>
            <div class="contract-detail">
              <div class="table">
                <a-row>
                  <a-col :span="4" class="cell field">Contract Name</a-col>
                  <a-col :span="20" class="cell value">{{ Utils.transformNullValue(item.contractName) }}</a-col>
                </a-row>
                <a-row>
                  <a-col v-if="item.contractType !== 5" :span="4" class="cell field">Contract Number</a-col>
                  <a-col v-if="item.contractType !== 5" :span="8" class="cell value">{{
                    Utils.transformNullValue(item.contractNumber)
                  }}</a-col>
                  <a-col :span="4" class="cell field">Type</a-col>
                  <a-col :span="item.contractType !== 5 ? 8 : 20" class="cell value">{{
                    Utils.transformNullValue(item.contractTypeName)
                  }}</a-col>
                </a-row>
                <a-row v-if="item.contractType === 5">
                  <a-col :span="4" class="cell field">Date to follow up</a-col>
                  <a-col :span="20" class="cell value">{{
                    Utils.transformNullValue(dayjs(item.followUp).format('YYYY-MM-DD'))
                  }}</a-col>
                </a-row>
                <a-row v-else>
                  <a-col :span="4" class="cell field">Start Date</a-col>
                  <a-col :span="8" class="cell value">{{
                    Utils.transformNullValue(dayjs(item.startDate).format('YYYY-MM-DD'))
                  }}</a-col>
                  <a-col :span="4" class="cell field">End Date</a-col>
                  <a-col :span="8" class="cell value">
                    {{ Utils.transformNullValue(dayjs(item.endDate).format('YYYY-MM-DD')) }}
                    <span v-if="item.isRenewal" class="renewal">Auto-renewal</span>
                    <span v-if="item.isExpire" class="overdue">Expired</span>
                  </a-col>
                </a-row>
                <a-row>
                  <a-col :span="4" class="cell field">Created By</a-col>
                  <a-col :span="8" class="cell value">{{ Utils.transformNullValue(item.createByName) }}</a-col>
                  <a-col :span="4" class="cell field">Created On</a-col>
                  <a-col :span="8" class="cell value">{{
                    Utils.transformNullValue(dayjs(item.createOn).format('YYYY-MM-DD'))
                  }}</a-col>
                </a-row>
                <a-row>
                  <a-col :span="4" class="cell field">Signed Company</a-col>
                  <a-col :span="20" class="cell value">
                    {{ Utils.transformNullValue(item.signedCompanyName) }}
                    <span style="color: #bfbfbf; margin-left: 10px">{{
                      Utils.transformNullValue(item.signedCompanyEnName)
                    }}</span>
                  </a-col>
                </a-row>
                <a-row style="height: 80px">
                  <a-col :span="4" class="cell field">Note</a-col>
                  <a-col :span="20" class="cell value" style="word-wrap: break-word">{{
                    Utils.transformNullValue(item.description)
                  }}</a-col>
                </a-row>
                <a-row>
                  <a-col :span="4" class="cell field">Attachment</a-col>
                  <a-col :span="20" class="cell value pdf">
                    <span class="pdf-down" @click="download(item)">
                      <PaperClipOutlined style="color: rgba(107, 121, 142, 0.85)" /> {{ item.attachmentName }}
                    </span>
                  </a-col>
                </a-row>
              </div>
            </div>
            <div class="line"></div>
          </div>
          <div v-if="!data.contractInfoList || data.contractInfoList.length === 0" class="empty">
            <NoData fontSize="240px" />
            <div class="des">No contract information</div>
          </div>
          <generate-contract-number v-model:show="showGenerateContractNumber" :client-id="route.params.id" />
          <apply-for-extension
            v-model:show="showApplyForExtension"
            :client-id="route.params.id"
            @status-changed="getExtensionStatus"
          />
        </div>
      </e-container>
    </a-spin>
  </div>
</template>

<script setup>
import { ref, onMounted, computed, inject } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { PaperClipOutlined } from '@ant-design/icons-vue'
import dayjs from 'dayjs'
import Utils from '@/utils'
import Contract from '@/api/client/contract.js'
import Config from '@/config'
import useDownload from '@/hooks/useDownload.js'
import { DELETE_SUCCEEDED } from '@/constants/message.js'
import EContainer from '@/components/EContainer.vue'
import EIcon from '@/components/EIcon.vue'
import ETitleAdd from '@/components/ETitleAdd.vue'
import NoData from '../components/NoData.vue'
import GenerateContractNumber from './clientContract/generateContractNumber.vue'
import ApplyForExtension from './clientContract/applyForExtenstion.vue'

const { message } = inject('Feedback')
const downloadHandler = useDownload
const route = useRoute()
const router = useRouter()
const store = useStore()
const dict = ref(computed(() => store.state.dict))
const briefInfo = computed(() => store.state.client.briefInfo)
store.dispatch('dict/getClientContractTypes')
store.dispatch('dict/getEciCompanies')
// 数据
const data = ref([])
const loading = ref(false)
const showGenerateContractNumber = ref(false)
const showApplyForExtension = ref(false)
const extensionStatus = ref(false)
/**
 * 新增
 */
const addContract = () => {
  router.push({ name: 'Add Contract', params: { cid: 'h', action: 'add' } })
}
/**
 * 删除
 * @param item
 */
const handleDelete = item => {
  Contract.deleteContract({
    contractID: item.id
  }).then(res => {
    if (res.code === 2000) {
      getContractInfo()
      message.success(DELETE_SUCCEEDED)
    }
  })
}
/**
 * 编辑
 * @param item
 */
const handleEdit = item => {
  router.push({ name: 'Add Contract', params: { cid: item.id, action: 'edit' } })
}
/**
 * 获取数据
 */
const getContractInfo = () => {
  loading.value = true
  const clientOrgID = route.params.id
  Contract.getContractInfoList({
    clientOrgID
  })
    .then(res => {
      if (res.code === 2000) {
        for (let i = 0; i < res.data.contractInfoList.length; i++) {
          dict.value.clientContractTypes.forEach(item => {
            if (res.data.contractInfoList[i].contractType === item.value) {
              res.data.contractInfoList[i].contractTypeName = item.text
            }
          })
          dict.value.eciCompanies.forEach(item => {
            if (res.data.contractInfoList[i].signedCompany === item.value) {
              res.data.contractInfoList[i].signedCompanyName = item.text
              res.data.contractInfoList[i].signedCompanyEnName = item.nameEN
            }
          })
        }
        data.value = res.data
      }
    })
    .finally(() => {
      setTimeout(() => {
        loading.value = false
      }, 30)
    })
}
/**
 * 下载
 * @param item
 */
const download = item => {
  downloadHandler.showDownload([
    {
      ServerFileID: 2,
      Url: Config.SIGNAL_R_URL,
      RealPath: item.attachmentAddr.replace('/\\/g', '\\\\'),
      FullName: `\\${item.attachmentName}`
    }
  ])
}
/**
 * 返回刷新
 */
const handleUpdate = () => {
  getContractInfo()
}
/**
 * 获取长期合作申请状态
 */
const getExtensionStatus = () => {
  Contract.getExtensionStatus(route.params.id).then(({ data }) => {
    extensionStatus.value = data
  })
}
getExtensionStatus()
/**
 * 初始化
 */
onMounted(() => {
  getContractInfo()
})
</script>

<style lang="less" scoped>
.contract {
  width: 100%;
  //height: 100%;
  //min-height: 100%;
  .container {
    width: 100%;
    height: 100%;
    padding: 24px;
    .top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .add-t {
        cursor: pointer;
        margin-top: 3px;
        color: @primary-color;
        .text {
          margin-left: 8px;
        }
      }
      .extension-t {
        user-select: none;
        margin-top: 3px;
        color: #52c41a;
        .text {
          margin-left: 8px;
        }
      }
    }
    .apply {
      width: 100%;
      height: 40px;
      border: 1px solid #ffe1a7;
      background-color: #fffaef;
      margin-top: 28px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 12px;
      box-sizing: border-box;
      .content {
        font-size: 14px;
        color: @text-black;
      }
      .apply-btn {
        cursor: pointer;
        background-color: #ffaf17;
        color: #fff;
        border-radius: 2px;
        padding: 0 8px;
      }
    }
    .d-divider {
      width: 100%;
      height: 1px;
      background-color: @lighter-gray;
      margin-top: 28px;
    }
    .tips {
      width: 100%;
      min-height: 40px;
      margin-top: 28px;
      border: 1px solid #ffe1a7;
      background-color: #fffaef;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 12px;
      .left {
        color: @text-black;
        width: 80%;
        font-size: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .right {
        font-size: 14px;
        color: @text-black;
        cursor: pointer;
        box-sizing: border-box;
        flex: 1;
        display: flex;
        justify-content: flex-end;
        margin-left: 60px;
        .pdf-down {
          padding: 2px 8px;
          background-color: @phase-default;
          color: @primary-color;
          max-width: 180px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
      .edit {
        margin-left: 80px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: @primary-color;
        cursor: pointer;
        margin-top: 2px;
      }
    }
    .contract-container {
      width: 100%;
      .container-top {
        width: 100%;
        height: 63px;
        display: flex;
        align-items: center;
        .info {
          color: @text-gray;
          span {
            margin-left: 6px;
            font-weight: 700;
            font-size: 14px;
          }
        }
        .divider {
          height: 16px;
          background-color: @border-color;
          margin-left: 24px;
          margin-right: 24px;
          margin-top: 4px;
        }
      }
      .contract-detail {
        width: 100%;
        padding-bottom: 6px;
        box-sizing: border-box;
        .table {
          border: 1px solid @lighter-gray;
          .cell {
            padding: 10px 14px;
            border-bottom: 1px solid @lighter-gray;
            border-right: 1px solid @lighter-gray;
            &:last-child {
              border-right: none;
            }
            &.field {
              background-color: @milk;
              color: @text-gray;
            }
          }
          .renewal {
            background-color: @phase-default;
            border-radius: 2px;
            font-size: 12px;
            color: @deep-gray;
            padding: 2px 4px;
            margin-left: 10px;
          }
          .overdue {
            background-color: #fafbcd;
            border-radius: 2px;
            font-size: 12px;
            color: #dc8d26;
            padding: 2px 4px;
            margin-left: 10px;
          }
          .pdf {
            color: @primary-color;
            font-size: 14px;
            line-height: 22px;
            cursor: pointer;
            .pdf-down {
              padding: 2px 8px;
              background-color: @phase-default;
              color: @primary-color;
            }
          }
          .ant-row:last-child {
            .cell {
              border-bottom: none;
            }
          }
        }
      }
      .line {
        width: 100%;
        height: 1px;
        background-color: @lighter-gray;
        margin-top: 20px;
      }
      &:last-child {
        .line {
          display: none;
        }
      }
    }
    .empty {
      width: 100%;
      height: 400px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .des {
        color: @text-gray;
      }
    }
  }
}
</style>
<route lang="yaml">
name: Client Contract
path: '/client/:id/contract'
meta:
  title: Contract
  sort: 40
  icon: Contract
  permission: Contract
</route>
